<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="details_card">
        <div class="item between" style="width: 100%;">
            <div class="flex" style="color: #28282a;font-size: 16px;">
                <div>{{ data.number == undefined ? '--' : data.number }}</div>
                <div style="margin: 0 6px;">|</div>
                <div>{{ data.name == undefined ? '--' : data.name }}</div>
            </div>
            <div style="color: #3569fd;font-size: 14px;cursor: pointer;" @click="refreshIP()">刷新</div>
        </div>
        <div class="item flex2" style="color: #28282a;font-size: 24px;">
            <img src="../../../assets//img/success.png" style="width: 24px;height: 24px;" alt="">
            <div style="margin-left: 8px;font-weight: 600;">{{ data?.activeIp?.query || '--' }}</div>
        </div>
        <div class="item flex2">
            <div class="user_item flex">
                <img src="../../../assets//img/success2.png" style="width: 16px;height: 16px;margin-right: 8px;" alt="">
                <!-- <div>皇冠</div> -->
                <a href="https://hga050.com" target="_blank">皇冠</a>
            </div>
            <div class="user_item flex">
                <img src="../../../assets//img/success2.png" style="width: 16px;height: 16px;margin-right: 8px;" alt="">
                <a href="https://www.isn88.com/membersite-api/#/login" target="_blank">智博</a>
                
            </div>
            <div class="user_item flex">
                <img src="../../../assets//img/success2.png" style="width: 16px;height: 16px;margin-right: 8px;" alt="">
                <a href="https://www.ps3838.com/zh-cn/sports/soccer" target="_blank">平博</a>
            </div>
        </div>
        <div class="item flex2">
            <div class="area_item">
                <div class="label">国家/地区: </div>
                <div class="value">{{ data?.activeIp?.country || '--' }}</div>
            </div>
            <div class="area_item">
                <div class="label">州/省: </div>
                <div class="value">{{ data?.activeIp?.regionName || '--' }}</div>
            </div>
            <div class="area_item">
                <div class="label">城市: </div>
                <div class="value">{{ data?.activeIp?.city || '--' }}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
// eslint-disable-next-line no-undef
const props = defineProps({
    data: Object
})

const chrome = window.chrome;

const refreshIP = () => {
    props.data.activeIp = {}
    const data = {
        action: 'refresh_ip'
    };

    // 发送消息到 Service Worker
    chrome.runtime.sendMessage(data, (response) => {
        if (chrome.runtime.lastError) {
            console.error("发送失败:");
        } else {
            console.log("收到后台响应:");
        }
    });
}

</script>

<style lang="scss" scoped>
.details_card {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .item:not(:first-child) {
        margin-top: 16px;
    }

    .user_item {
        padding: 0 12px;
        color: #5b5c60;

        a{
            color: #5b5c60;
            font-size: 14px;
            text-decoration: none;
        }
    }

    .user_item:not(:last-child) {
        border-right: 2px solid #e8e8e8;
    }

    .area_item {
        display: flex;
        align-items: center;
        font-size: 16px;
        padding: 0 12px;

        .label {
            color: #28282a;
            margin-right: 12px;

        }

        .value {
            color: #87878b;
        }
    }
}

.flex {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex2 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
</style>